<script setup>
import { ref,onMounted } from 'vue';
import {getProvGroup} from '@/api/ProvGroupStat'

//查询数据
const search = async() => { 
  const result = await getProvGroup();
  provinceData.value = result.data;
}
// 模拟的省分组分项检查统计数据
const provinceData = ref([
  // { id: 1, abbreviation: '京', name: '北京市', so2: 1, co: 2, pm25: 1, aqi: 2 },
  // { id: 2, abbreviation: '津', name: '天津市', so2: 0, co: 1, pm25: 1, aqi: 1 },
  // { id: 3, abbreviation: '冀', name: '河北省', so2: 3, co: 4, pm25: 2, aqi: 3 },
  // { id: 4, abbreviation: '晋', name: '山西省', so2: 5, co: 3, pm25: 4, aqi: 5 },
  // { id: 5, abbreviation: '蒙', name: '内蒙古自治区', so2: 2, co: 2, pm25: 3, aqi: 2 },
  // { id: 6, abbreviation: '辽', name: '辽宁省', so2: 4, co: 5, pm25: 3, aqi: 4 },
  // { id: 7, abbreviation: '吉', name: '吉林省', so2: 1, co: 3, pm25: 2, aqi: 1 },
  // { id: 8, abbreviation: '黑', name: '黑龙江省', so2: 2, co: 4, pm25: 3, aqi: 2 },
  // { id: 9, abbreviation: '沪', name: '上海市', so2: 0, co: 1, pm25: 0, aqi: 1 },
  // { id: 10, abbreviation: '苏', name: '江苏省', so2: 3, co: 2, pm25: 1, aqi: 2 },
  // { id: 11, abbreviation: '浙', name: '浙江省', so2: 2, co: 3, pm25: 2, aqi: 3 },
  // { id: 12, abbreviation: '皖', name: '安徽省', so2: 4, co: 5, pm25: 4, aqi: 5 },
  // { id: 13, abbreviation: '闽', name: '福建省', so2: 1, co: 2, pm25: 1, aqi: 2 },
  // { id: 14, abbreviation: '赣', name: '江西省', so2: 3, co: 4, pm25: 3, aqi: 4 },
  // { id: 15, abbreviation: '鲁', name: '山东省', so2: 5, co: 6, pm25: 5, aqi: 6 },
  // { id: 16, abbreviation: '豫', name: '河南省', so2: 4, co: 3, pm25: 4, aqi: 3 },
  // { id: 17, abbreviation: '鄂', name: '湖北省', so2: 2, co: 2, pm25: 1, aqi: 2 },
  // { id: 18, abbreviation: '湘', name: '湖南省', so2: 3, co: 4, pm25: 3, aqi: 4 },
  // { id: 19, abbreviation: '粤', name: '广东省', so2: 1, co: 1, pm25: 0, aqi: 1 },
  // { id: 20, abbreviation: '桂', name: '广西壮族自治区', so2: 2, co: 3, pm25: 2, aqi: 3 },
  // { id: 21, abbreviation: '琼', name: '海南省', so2: 0, co: 0, pm25: 0, aqi: 0 },
  // { id: 22, abbreviation: '渝', name: '重庆市', so2: 1, co: 2, pm25: 1, aqi: 2 },
  // { id: 23, abbreviation: '川', name: '四川省', so2: 3, co: 4, pm25: 3, aqi: 4 },
  // { id: 24, abbreviation: '黔', name: '贵州省', so2: 2, co: 1, pm25: 2, aqi: 1 },
  // { id: 25, abbreviation: '滇', name: '云南省', so2: 4, co: 5, pm25: 4, aqi: 5 },
  // { id: 26, abbreviation: '藏', name: '西藏自治区', so2: 0, co: 0, pm25: 0, aqi: 0 },
  // { id: 27, abbreviation: '陕', name: '陕西省', so2: 3, co: 2, pm25: 3, aqi: 2 },
  // { id: 28, abbreviation: '甘', name: '甘肃省', so2: 2, co: 3, pm25: 2, aqi: 3 },
  // { id: 29, abbreviation: '青', name: '青海省', so2: 1, co: 1, pm25: 1, aqi: 1 },
  // { id: 30, abbreviation: '宁', name: '宁夏回族自治区', so2: 0, co: 1, pm25: 0, aqi: 1 },
  // { id: 31, abbreviation: '新', name: '新疆维吾尔自治区', so2: 2, co: 2, pm25: 1, aqi: 2 }
]);
//钩子函数
onMounted(() => { 
  search();
});
</script>

<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>省分组分项检查统计</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 省分组分项检查统计卡片 -->
    <el-card class="province-card">
      <template #header>
        <div class="card-header">
          <span>省分组分项检查统计</span>
        </div>
      </template>
      <el-table :data="provinceData" style="width: 100%" height="450">
        <el-table-column fixed prop="id" label="省编号" width="120" align="center" />
        <el-table-column prop="provinceShortForm" label="省简称" width="120" align="center" />
        <el-table-column prop="provinceName" label="省名称" width="180" align="center" />
        <el-table-column prop="so2Over" label="SO2超标累计" width="180" align="center"/>
        <el-table-column prop="coOver" label="CO超标累计" width="180" align="center"/>
        <el-table-column prop="pm25Over" label="PM2.5超标累计" width="180" align="center" />
        <el-table-column prop="aqiOver" label="AQI超标累计" width="180" align="center" />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.province-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
